<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
	<title>Document</title>
	<link rel="stylesheet" href="css/music.css">
	<script src="js/phone.js"></script>
	<script src="js/jquery.js"></script>

	<!-- <script src="js/vue.js"></script> -->

	<script>
		$(function(){

//data
			var musicList = [
						'http://haha.boboweiqi.cn/voice/1.mp3',
						'http://haha.boboweiqi.cn/voice/2.mp3',
						'http://haha.boboweiqi.cn/voice/3.mp3'
					]//模拟音乐列表
			var musicId = 1 //音乐列表中位置
			var timer = null //开启计时器
			var musicDuration = 0//总时长
			var musicCurrentTime = 0//当前时长
//data Enc

//封装方法
			//初始化播放器
			function playerStart(num){
				musicId = num
				document.querySelector('#videoId').src=musicList[musicId];
				document.querySelector('#videoId').play();
			}
			//前后切换 {up:上一首,down:下一首}
			function cutMusicPlayer(cutStatus){
				if(cutStatus == 'up'){
					musicId--; 
					if(musicId < 0) musicId = musicList.length-1;
				}else{
					musicId++; 
					if(musicId >= musicList.length) musicId = 0;
				}
				document.querySelector('#videoId').src=musicList[musicId];
			    document.querySelector('#videoId').play();
			}
			//播放模式 
			function playModule(pMStatus){
				// console.log(pMStatus)
				if(pMStatus == "onlyOne"){
					document.querySelector('#videoId').loop = 'loop'
				}else if(pMStatus == "listAll"){
					// console.log("pMStatus是listAll")
					document.querySelector('#videoId').loop = ''
					document.querySelector('#videoId').onended = function() {
					    //监听video播放完成
					    cutMusicPlayer('down')
					};
				}
			}
			function numToTime(num){
				var minuteTime = parentInt(num/60)>10 ? parentInt(num/60) : '0' + parentInt(num/60);
				var secondTime = parentInt(num%60)>10 ? parentInt(num%60) : '0' + parentInt(num%60);
			}
//封装方法End

			playerStart(0);//初始化播放器
			playModule("listAll")//默认播放模式循环播放

			//播放下一首
			$('#music_next').click(function(){
				cutMusicPlayer('down')
				$('#music_play').attr('class','mC');
				$('#music_stop').attr('class','mC mCActive');
			});
			//播放上一首
			$('#music_last').click(function(){
				cutMusicPlayer('up')
				$('#music_play').attr('class','mC');
				$('#music_stop').attr('class','mC mCActive');
			});
			//播放
			$('#music_play').click(function(){
				document.querySelector('#videoId').play()
				$('#music_play').attr('class','mC');
				$('#music_stop').attr('class','mC mCActive');
			})
			//暂停
			$('#music_stop').click(function(){
				document.querySelector('#videoId').pause()
				$('#music_stop').attr('class','mC');
				$('#music_play').attr('class','mC mCActive');
			})
			//播放单曲播放模式
			$('#onlyOne').click(function(){
				playModule('onlyOne')
				$(this).attr('class','mStatus mStatusActive');
				$('#listAll').attr('class','mStatus')
			})
			//播放循环播放模式
			$('#listAll').click(function(){
				playModule('listAll')
				$('#onlyOne').attr('class','mStatus mStatusActive');
				$(this).attr('class','mStatus')
				
			})

			//调节播放进度
			$('#music_currentTime').blur(function(){
				var currentT = $(this).val() 
				document.querySelector('#videoId').currentTime = currentT //更改currentTime时间S
			})

			document.querySelector('#videoId').onplaying = function(){
				musicDuration = document.querySelector('#videoId').duration//总时长
				musicCurrentTime = document.querySelector('#videoId').currentTime//当前时长
				console.log(musicDuration)
				console.log(musicCurrentTime)
			}

			setInterval(document.querySelector('#videoId').onplaying,1000)//获取当前播放时长，以及总时长


		})
	</script>


	
</head>
<body>

	<div id="musicV">

		<video id="videoId" controls="controls" width="500" height="40" autoplay="autoplay" loop="loop">
	            <source src="" type="video/ogg"/>
	            <source src="" type="video/webm" />
	            您的浏览器不支持  
		</video>
		<!-- <input type="button" value="随机播放" id="listRnd"> -->
		
	</div>


	<div class="musicFrame">


		<!-- <input type="button" value="下一曲" id="music_next">
		<input type="button" value="上一曲" id="music_last">

		<input type="button" value="播放" id="music_play">
		<input type="button" value="暂停" id="music_stop">

		<input type="text" value="0" id="music_currentTime">


		<input type="button" value="单曲循环" id="onlyOne">
		<input type="button" value="列表循环" id="listAll">

		<div class="scrollBar">
			<span></span>
		</div>
 -->





		<div class="musicControl flex_box">
			<!-- 单曲循环 -->
			<div class="mC mCActive" id="listAll"><img src="img/cm2_icn_one@2x.png" alt=""></div>
			<!-- 列表循环 -->
			<div class="mC"  id="onlyOne"><img src="img/cm2_icn_loop@2x.png" alt=""></div>
			<!-- 上一首歌 -->
			<div class="cutMusicPlayer" id="music_last"><img src="img/ajh.png" alt=""></div>
			<!-- 显示播放 -->
			<div class="mStatus mStatusActive" id="music_stop"><img src="img/ajd.png" alt=""></div>
			<!-- 显示暂停 -->
			<div class="mStatus" id="music_play"><img src="img/ajf.png" alt=""></div>
			<!-- 下一首歌 -->
			<div class="cutMusicPlayer" id="music_next"><img src="img/ajb.png" alt=""></div>
			<!-- 列表 -->
			<div class="mList"><img src="img/cm2_icn_list@2x.png" alt=""></div>
		</div>
	</div>










   <!--  <button onclick="kuaijin()">快进10秒</button>
    <button onclick="kuaitui()">快退10秒</button>
    <button onclick="shutup(this)">静音</button>
    <button onclick="soso()">加速播放</button>
    <button onclick="yu()">减速播放</button>
    <button onclick="normal()">正常播放</button>
    <button onclick="upper()">提高嗓门</button>
    <button onclick="lower()">降低嗓门</button>

    <script>
        //获取相应的video标签
        var video = document.getElementById('video');

        //静音、不静音
        function shutup(obj){
            if(video.muted){
                // 有声音状态下状态下
                obj.innerHTML = "静音";
                video.muted = flase;
            }
            else{
                obj.innerHTML = "声音";
                video.muted = true;
            }
        }
        //加速播放
        function soso(){
            video.playbackRate = 3;
        }
        //减速播放
        function yu(){
            video.playbackRate = 1/3;
        }
        //正常播放
        function normal(){
            video.playbackRate = 1; //默认播放速率为1
        }
        //调高声音
        function upper(){
            video.volume += 0.2;//声音值的范围是0-1
        }
        //减小声音
        function lower(){
            video.volume -= 0.2;
        }
    </script> -->



</body>
</html>